<template>
  <div class="my-music">
    <div class="album-slide">
      <div class="album-img">
        <img :src=attachImageUrl(avator) alt="">
      </div>
      <ul class="album-info">
        <li>用户名： {{username}}</li>
        <li>昵称：{{nickname}}</li>
        <li>性别：{{userSex}}</li>
        <li>生日：{{birth}}</li>
        <li>故乡：{{location}}</li>
        <li>个性签名：{{introduction}}</li>
        <li>
          <div class="my-search">
            <input type="text" placeholder="搜索我的歌曲" @keyup.enter="goMySearchSong" v-model="songkeywords">
            <div class="search-btn"  @click="goMySearchSong" >
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="SOUSUO"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <div class="my-search">
            <input type="text" placeholder="搜索我的歌单" @keyup.enter="goMySearchSongList" v-model="songListkeywords">
            <div class="search-btn"  @click="goMySearchSongList" >
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="SOUSUO"></use>
              </svg>
            </div>
          </div>
        </li>
        <li>
          <button class="new-btn" @click="dialogFormVisible = true">新建歌单</button>
        </li>
      </ul>
      <!--添加歌单-->
      <el-dialog title="添加歌单" :visible.sync="dialogFormVisible" width="400px" center>
        <el-form :model="registerForm" status-icon ref="registerForm" label-width="70px" class="demo-ruleForm">
          <el-form-item label="歌单名" prop="title" size="mini">
            <el-input v-model="registerForm.title" placeholder="歌单名"></el-input>
          </el-form-item>
          <el-form-item label="歌单介绍" prop="introduction" size="mini">
            <el-input v-model="registerForm.introduction" placeholder="歌单介绍"></el-input>
          </el-form-item>
          <el-form-item label="风格" prop="style" size="mini">
            <el-input v-model="registerForm.style" placeholder="风格"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="addSongList">确 定</el-button>
      </span>
      </el-dialog>
    </div>
    <div class="album-content" v-if="isSerchingSong===true">
      <div class="songs-body">
        <album-content :songList="collectList">
          <template slot="title">搜索我的歌曲</template>
        </album-content>
      </div>
    </div>
    <div class="section" v-else-if="isSearchingList===false">
      <div class="section-title">我的歌单</div>
      <content-list :contentList="songLists" path="user-song-list-album"></content-list>
    </div>
    <div class="section" v-else>
      <div class="section-title">搜索我的歌单</div>
      <content-list :contentList="searchsongLists" path="user-song-list-album"></content-list>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import AlbumContent from '../components/AlbumContent'
import { mapGetters } from 'vuex'
import { HttpManager } from '../api/index'
import ContentList from '@/components/ContentList'
import {ICON} from "../assets/icon"; // 歌单

export default {
  name: 'my-music',
  mixins: [mixin],
  components: {
    AlbumContent,
    ContentList
  },
  data () {
    return {
      registerForm: {
        title: '',
        introduction: '',
        style: ''
      }, // 新建歌单信息
      avator: '',
      username: '',
      nickname: '',
      userSex: '',
      birth: '',
      location: '',
      introduction: '',
      collection: [], // 存放收藏的歌曲ID
      collectList: [], // 搜索收藏的歌曲
      searchsongLists: [], // 搜索我的歌单
      songLists: [], // 歌单列表
      songkeywords: '', // 搜索歌曲关键字
      songListkeywords: '', // 搜索歌单关键字
      SOUSUO: ICON.SOUSUO,
      dialogFormVisible: false, // 新建歌单弹出框
      formLabelWidth: '120px',
      isSearchingList: false,
      isSerchingSong: false
    }
  },
  computed: {
    ...mapGetters([
      'userId',
      'id',
      'listOfSongs' // 存放的音乐
    ])
  },
  mounted () {
    this.getMsg(this.userId)
    this.getCollection(this.userId)
  },
  methods: {
    getMsg (id) {
      HttpManager.getUserOfId(id)
        .then(res => {
          // console.log(res);
          this.username = res[0].username
          this.nickname = res[0].nickname
          this.getuserSex(res[0].sex)
          this.birth = this.attachBirth(res[0].birth)
          this.introduction = res[0].introduction
          this.location = res[0].location
          this.avator = res[0].avator
        })
        .catch(err => {
          console.log(err)
        })
    },
    getuserSex (sex) {
      if (sex === false) {
        this.userSex = '女'
      } else if (sex === true) {
        this.userSex = '男'
      }
    },
    // 收藏的歌单ID
    getCollection (userId) {
      HttpManager.getCollectionOfUser(userId)
        .then(res => {
          this.songLists = res
        })
        .catch(err => {
          console.log(err)
        })
    },
    goMySearchSong () {
      this.isSearchingList = false
      this.isSerchingSong = true
      HttpManager.querySongInList(this.songkeywords, this.userId)
        .then(res => {
          console.log(res);
          this.collectList = res
        })
        .catch(err => {
          console.log(err)
        })

    },
    goMySearchSongList () {
      this.isSerchingSong = false
      this.isSearchingList = true
      HttpManager.queryConsumerSongList(this.songListkeywords, this.userId)
        .then(res => {
          console.log(res);
          this.searchsongLists = res
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 添加歌单
    addSongList () {
      let params = new URLSearchParams()
      params.append('user_id', this.userId)
      params.append('title', this.registerForm.title)
      params.append('pic', '/img/songListPic/default.jpg')
      params.append('introduction', this.registerForm.introduction)
      params.append('style', this.registerForm.style)
      HttpManager.addConsumerSongList(params).then(res => {
        if (res.code === 1) {
          // this.getData()
          this.registerForm = {}
          this.notify('添加成功', 'success')
        } else {
          this.notify('添加失败', 'error')
        }
      }).catch(err => {
        console.log(err)
      })
      this.dialogFormVisible = false
      this.$router.go(0)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/my-music.scss';
</style>
